<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      empty-view-text="暂时还没有数据咯~"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      :empty-view-img-style="imgStyle"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
    >
      <view slot="top">
        <u-navbar
          title="我的积分"
          title-size="36"
          back-icon-color="#333"
          title-color="#333"
        ></u-navbar>
        <view
          class="moneyView"
          :style="{
            backgroundImage: `url(${getImageUrl('points-bg.png')})`
          }"
        >
          <view class="moneyTitle dis-flex flex-y-between">
            <text class="title-lef">我的积分</text>
            <view class="dis-flex flex-y-center" @click="ruleShow = true">
              <text class="title-rig">积分规则</text>
              <u-icon name="/static/tishi.png" style="margin-left: 10rpx" size="28"></u-icon>
            </view>
          </view>
          <view class="postView">
            <text class="balance">{{ count }}</text>
            <!-- <view class="integral-btn" style="background-color: #8CC340;margin-left: 30rpx;">
							去兑换
						</view>
						<view class="integral-btn" @click="routeTo('/other/integral-record/integral-record')" style="background-color: #0F76BC;">
							兑换记录
						</view> -->
          </view>
        </view>
      </view>

      <view class="" style="padding: 20rpx">
        <view style="background-color: #fff; border-radius: 10rpx">
          <view class="" style="padding: 20rpx; font-size: 30rpx; color: #999999"> 积分明细 </view>
          <view class="itemView" v-for="(item, index) in itemList" :key="index">
            <view class="itemHead">
              <view class="itemTitle">{{ item.title }}</view>
              <view class="itemMoney" v-if="item.point > 0">+{{ item.point }}</view>
              <view class="itemMoney" style="color: #fa453c" v-else>{{ item.point }}</view>
            </view>
            <view class="itemTime">
              <!-- <view>2024-10-13 12:38:25</view> -->
              <view>{{ $u.timeFormat(item.createTime, 'yyyy-mm-dd hh:MM') }}</view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
    <u-popup v-model="ruleShow" border-radius="20" mode="center" width="600rpx" height="auto">
      <view class="pos-fixed rule-warpper">
        <view class="title">规则说明</view>
        <scroll-view scroll-y="true" style="min-height: 300rpx; max-height: 690rpx">
          <view class="content">
            <u-parse :html="ruleDetail" />
          </view>
        </scroll-view>
        <view class="colse-bt" @click="ruleShow = false">知道了</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ruleDetail: '',
      ruleShow: false,
      imgStyle: {
        width: '12rem'
      },
      current: 0,
      tabList: [
        {
          name: '收益记录'
        },
        {
          name: '提现记录'
        }
      ],
      itemList: [],
      count: 0
    }
  },
  onLoad(options) {
    if (options.count) {
      this.count = options.count
    } else {
      this.$u.get('/app-api/member/statistics/center-count').then((res) => {
        this.count = res.data.totalPoint //todo
      })
    }
    this.queryList()
    this.$u.get('/app-api/cms/agreement/get-content', { identify: 'point_rule' }).then((res) => {
      this.ruleDetail = res.data
    })
  },
  methods: {
    tabsChange(index) {
      this.current = index
    },
    queryList(page, pageSize) {
      this.$u.get('/app-api/member/point/record/page').then((res) => {
        this.$refs.paging.complete(res.data.list)
      })
    },
    onWithdrawal() {
      this.$utils.route('/other/withdrawal/withdrawal')
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background: #f0f1f2;
}
.moneyView {
  height: 200rpx;
  box-shadow: 0px 4rpx 10rpx 0px rgba(219, 219, 219, 0.42);
  // border-radius: 16rpx;/
  margin: 20rpx 20rpx 0 20rpx;
  padding: 47rpx 20rpx 47rpx 36rpx;
  background-position: center;
  background-size: cover;
  color: #fff;
}

.moneyTitle {
  font-size: 28rpx;
  font-weight: 400;
  margin-bottom: 30rpx;
  overflow: auto;
}
.title-lef {
  float: left;
  font-size: 24rpx;
}
.title-rig {
  font-size: 24rpx;
}
.postView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.balance {
  font-size: 48rpx;
  font-weight: 600;
}

.integral-btn {
  display: inline-block;
  padding: 8rpx 20rpx;
  color: #fff;
  font-size: 33rpx;
  border-radius: 35rpx;
  margin-right: 10rpx;
}

.withdrawal {
  width: 100rpx;
  height: 40rpx;
  line-height: 40rpx;
  text-align: center;
  background: #fdea11;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #b65a00;
  margin-left: 40rpx;
}

.tabView {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ededed;
  position: sticky;
  top: 0px;
}

.itemView {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  border-bottom: 1px solid #ededed;
}

.itemHead {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #121212;
}

.itemTitle {
  flex: 1;
}

.itemTime {
  font-size: 22rpx;
  font-weight: 400;
  color: #999999;
  margin-top: 15rpx;
}

.rule-warpper {
  background: white;
  padding: 30rpx;
  display: flex;
  flex-flow: column;
  align-items: center;
  height: auto;
  border-radius: 20rpx;

  .title {
    font-weight: 500;
    font-size: 34rpx;
    color: #333333;
    margin: 20rpx 0;
  }

  .content {
    margin: 30rpx 0 57rpx 0;
  }

  .colse-bt {
    width: 240rpx;
    height: 72rpx;
    background: #10a28f;
    border-radius: 36rpx;
    font-weight: 400;
    font-size: 30rpx;
    color: #ffffff;
    line-height: 72rpx;
    text-align: center;
  }
}
.itemMoney {
  font-weight: 600;
  font-size: 30rpx;
  color: #10a28f;
}
.itemMoney-1 {
  font-weight: 600;
  font-size: 30rpx;
  color: #333333;
}
</style>
